<template>
  <div class="app-container">
    <el-form
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      :label-position="'right'"
    >
      <el-form-item label="监测站点" prop="segmentId">
        <el-select
          v-model="queryParams.segmentId"
          multiple
          collapse-tags
          placeholder="请选择"
        >
          <el-option
            v-for="item in jcdmoptions"
            :key="item.id"
            :label="item.segmentname"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否超标" prop="isOverStandard">
        <el-switch
          v-model="queryParams.isOverStandard"
          active-value="1"
          inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ccc"
        >
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          style="padding: 10px"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData" style="width: 100%" border @sort-change="handleSortChange">
      <!-- 断面名称 -->
      <el-table-column
        prop="segmentname"
        label="站点名称"
        align="center"
      ></el-table-column>

      <!-- 监测时间 -->
      <el-table-column
        prop="sampletime"
        label="监测时间"
        align="center"
        width="180"
      ></el-table-column>

      <!-- 水质类别 -->
      <el-table-column prop="qualitylevelname" label="水质类别" align="center">
        <template slot-scope="scope">
          <span :class="`water-class-${scope.row.qualitylevel}`">
            {{ scope.row.qualitylevelname }}
          </span>
        </template>
      </el-table-column>
      <!-- 目标水质、是否达标、超标描述； -->
      <el-table-column
        prop="targetlevelname"
        label="目标水质"
        align="center"
      ></el-table-column>

      <!-- 是否达标 -->
      <el-table-column prop="isoverstandard" label="是否达标" align="center">
        <template slot-scope="scope">
          <span
            class="water-class"
            :class="`water-class-${scope.row.isoverstandard}`"
          >
            {{ scope.row.isoverstandard == 1 ? "超标" : "达标" }}
          </span>
        </template>
      </el-table-column>
      <!-- 超标描述 -->
      <el-table-column
        prop="overstandarddescribe"
        label="超标描述"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <!-- <el-table-column prop="dataSource" label="数据来源"  align="center"></el-table-column> -->

      <el-table-column
        prop="Wq"
        label="流量（m³/s）"
        align="center"
        width="140"
        sortable="custom"
      ></el-table-column>
      <!-- 水温 -->
      <el-table-column
        prop="temp"
        label="水温(°C)"
        align="center"
        width="130"
        sortable="custom"
      ></el-table-column>

      <!-- pH -->
      <el-table-column prop="pH" label="pH" align="center" sortable="custom"></el-table-column>

      <!-- 溶解氧 -->
      <el-table-column
        prop="DO"
        label="溶解氧(mg/L)"
        align="center"
        width="140"
        sortable="custom"
      ></el-table-column>

      <!-- 电导率 -->
      <el-table-column
        prop="cond"
        label="电导率(μS/cm)"
        align="center"
        width="140"
        sortable="custom"
      ></el-table-column>

      <!-- 浊度 -->
      <el-table-column
        prop="NTU"
        label="浊度(NTU)"
        align="center"
        sortable="custom"
        width="140"
      ></el-table-column>

      <!-- 高锰酸盐指数 -->
      <el-table-column
        prop="CODMn"
        label="高锰酸盐指数(mg/L)"
        align="center"
        width="100"
        sortable="custom"
      ></el-table-column>

      <!-- 氨氮 -->
      <el-table-column
        prop="NH4N"
        label="氨氮(mg/L)"
        align="center"
        sortable="custom"
        width="140"
      ></el-table-column>

      <!-- 总磷 -->
      <el-table-column
        prop="TP"
        label="总磷(mg/L)"
        align="center"
        sortable="custom"
        width="120"
      ></el-table-column>

      <!-- 总氮 -->
      <el-table-column
        prop="TN"
        label="总氮(mg/L)"
        align="center"
        sortable="custom"
        width="130"
      ></el-table-column>

      <!-- 叶绿素a -->
      <!-- <el-table-column prop="chlorophyllA" label="叶绿素a(μg/L)" width="130" align="center"></el-table-column> -->

      <!-- 透明度 -->
      <!-- <el-table-column prop="transparency" label="透明度(cm)"  align="center"></el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import { getSegmentList1 } from "@/api/drinkingwatersource.js";
import { getOnlineMonitoringData } from "@/api/riverGeneralMange/riverGeneralMange.js";
export default {
  name: "OnlineMonitoring",
  data() {
    return {
      loading: false,
      tableData: [],
      allData: [], // 存储全部数据用于排序
      jcdmoptions: [],
      queryParams: {
        segmentId: "",
        isOverStandard: 0,
      },
      // 排序相关状态
      sortField: '',
      sortOrder: '',
    };
  },
  created() {
    this.query();
  },
  methods: {
    handleQuery() {
      this.getOnlineMonitoringData();
    },
    async query() {
      await this.getSegmentList();
      await this.getOnlineMonitoringData();
    },
    // 获取监测断面下拉
    async getSegmentList() {
      const res = await getSegmentList1({ isauto: 1, isdrink: 0 });
      if (res.code === 200) {
        this.jcdmoptions = res.rows;
      }
    },
    // 处理排序事件
    handleSortChange({ prop, order }) {
      this.sortField = prop;
      this.sortOrder = order;
      this.sortData();
    },
    
    // 对数据进行排序
    sortData() {
      if (!this.sortField || !this.sortOrder) {
        this.tableData = [...this.allData];
        return;
      }
      
      let sortedData = [...this.allData].sort((a, b) => {
        let aVal = a[this.sortField];
        let bVal = b[this.sortField];
        
        // 处理数字类型数据的排序
        if (!isNaN(parseFloat(aVal)) && !isNaN(parseFloat(bVal))) {
          aVal = parseFloat(aVal);
          bVal = parseFloat(bVal);
        }
        
        if (this.sortOrder === 'ascending') {
          return aVal > bVal ? 1 : -1;
        } else {
          return aVal < bVal ? 1 : -1;
        }
      });
      
      this.tableData = sortedData;
    },
    
    // 获取在线监测数据
    async getOnlineMonitoringData() {
      this.loading = true;
      let segmentId = this.queryParams.segmentId;
      if (segmentId) {
        segmentId = segmentId.join(",");
      }
      const { code, rows } = await getOnlineMonitoringData({
        segmentid: segmentId,
        isOverStandard: this.queryParams.isOverStandard,
      });
      if (code === 200) {
        this.allData = rows; // 存储全部数据
        this.sortData(); // 应用排序
      }
      this.loading = false;
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.water-class {
  display: inline-block;
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #00c48c;
  color: white;
  border-radius: 2px;
  font-size: 12px;
}

.water-class-II {
  display: inline-block;
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #409eff;
  color: white;
  border-radius: 2px;
  font-size: 12px;
}

.water-class-1 {
  display: inline-block;
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: red;
  color: white;
  border-radius: 2px;
  font-size: 12px;
}
.water-class-0 {
  display: inline-block;
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #00c48c;
  color: white;
  border-radius: 2px;
  font-size: 12px;
}
</style>
